<template>
  <div class="outerDiv">
    <sec-form
      ref="formRef"
      :hideProp="hideProp"
      :ruleForm="ruleForm"
      :formData="formData"
      :rules="rules"
      :span="12"
      :optionData="optionData"
    >
      <template v-slot:operation>
        <!-- <el-button @click="clickInsertTemp">暂存</el-button> -->
        <el-button type="primary" @click="clickInsert">保存</el-button>
        <el-button type="primary" :disabled="optReviewDis" @click="previewTouch">预览</el-button>
        <el-button @click="reset">重置</el-button>
      </template>
      <template v-slot:content>
        <!-- <button @click="previewData">print html</button> -->
        <div>
          <mavon-editor
            v-if="isDcEditorShow"
            v-model="ruleForm.content"
            ref="markdownEditor"
            :toolbars="toolbars"
            :autofocus="false"
            @imgAdd="$imgAdd"
          >
            <template slot="left-toolbar-before">
              <button
                type="button"
                @click.stop="$toggle_imgLinkAdd('imagelink')"
                class="op-icon fa fa-mavon-picture-o dropdown dropdown-wrapper"
                aria-hidden="true"
                title="添加图片链接"
              ></button>
              <span class="op-icon-divider"></span>
            </template>
          </mavon-editor>
          <html-editor
            v-if="!isDcEditorShow"
            :htmlValue="ruleForm.content"
            ref="htmlEditor"
            @editorChange="editorChange"
          />
        </div>
      </template>
      <template v-slot:msgTemplatePreview>
        <!-- <button @click="getVariablesListData">getVariablesListData</button> -->
        <!-- <button @click="setVariables">setVariables</button> -->
        <iframe
          id="msgTemplatePreviewIframe"
          :src="iframeUrl"
          frameborder="0"
          ref="msgTemplatePreviewRef"
          style="border: 1px solid #dcdfe6; border-radius: 4px; width: 100%; height: 300px"
        >
        </iframe>
      </template>
      <template v-slot:dcFormPreview>
        <div
          style="
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            width: 100%;
            height: 90px;
            color: #fa8919;
            background-color: #eee;
          "
        >
          DC模板预览开发中，您可以点击页面下方预览按钮向自己发送一份消息进行预览
        </div>
      </template>
      <template v-slot:variablesList>
        <div>
          <sec-table :tableData="variablesList.data" :tableCol="variablesList.tableCol">
            <template v-slot:value="{ data }">
              <el-select
                filterable
                allow-create
                clearable
                default-first-option
                v-model="data.row.value"
                placeholder="请输入自定义变量值/选择内置变量"
              >
                <el-option-group v-for="group in variablesList.inputOptions" :key="group.label" :label="group.label">
                  <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </template>
          </sec-table>
        </div>
      </template>
    </sec-form>
  </div>
</template>

<script>
import {
  touchInsertApi,
  dcFromListApi,
  dcFormDetailApi,
  dcSenderListApi,
  msgSenderListApi,
  msgTemplateListApi,
  msgTemplateDetailApi,
  previewTouchApi,
  detailTaskApi,
} from "api/dataCenter.js";
// 引入富文本编辑器
import HtmlEditor from "views/touch/myEditor.vue";
import { validContent } from "utils/validate.js";

export default {
  components: { HtmlEditor },
  data() {
    return {
      variablesList: {
        data: [],
        tableCol: [
          { label: this.$t("变量名"), prop: "name", width: 200 },
          { type: "slot", label: this.$t("变量值"), prop: "value" },
        ],
        inputOptions: [
          {
            label: "内置变量",
            options: [
              {
                value: "__RECEIVER__",
                label: "接收人",
              },
              {
                value: "__DATETIME__",
                label: "当前时间",
              },
              {
                value: "__DATE__",
                label: "当前日期",
              },
            ],
          },
        ],
      },
      templateContent: "",
      iframeUrl: "",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: false, //标题
        underline: false, // 下划线
        strikethrough: true, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        code: true, // 代码块
        table: false, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: true, // 预览
      },
      isDcEditorShow: true,
      sendData: "sendMe",
      editor: "",
      optReviewDis: false,
      ruleForm: {
        id: "",
        title: "",
        content: "",
        receiver: "",
        msgChannel: 1,
        // 0 不排他，1 排他
        exclusive: 0,
        // 模版id
        templateId: "",
        template: "",
        // 消息主体
        msgAccountId: "",
        // dc 表单id
        dcFormId: "",
        // 跟崔id
        followId: "",
        // dc 会话id
        vChannelId: "",
        // 模版变量
        variables: "",
        // 回调地址
        notifyUrl: "",
        // 控制预览变量
        previewTitle: "",
        previewMsgAccountId: "",
        previewContent: "",
        // trur receiver
        receiverorVChannelId: true,
      },
      hideProp: {
        receiver: false,
        vChannelId: true,
        notifyUrl: true,
        variables: true,
        content: false,
        templateId: true,
        dcFormId: true,
        exclusive: false,
        receiverorVChannelId: false,
        dcFormPreview: true,
        variablesList: true,
      },
      optionData: {
        // 消息渠道
        msgChannel: [
          { label: "D-Chat", value: 1 },
          { label: "邮件", value: 2 },
        ],
        // 是否排他
        exclusive: [
          { label: "不排他", value: 0 },
          { label: "排他", value: 1 },
        ],
        // 接收者类型
        receiverorVChannelId: [
          { label: "账号", value: true },
          { label: "群会话", value: false },
        ],
        //账号主体id
        msgAccountId: [],
        //邮件模版
        templateId: [],
        //dc模版
        dcFormId: [],
      },
      formData: [
        {
          type: "text",
          clearable: true,
          filterable: true,
          label: this.$t("任务标题"),
          prop: "title",
          input: () => {
            this.ruleForm.previewTitle = this.ruleForm.title ? true : false;
            this.disabledHandle();
          },
        },
        {
          type: "text",
          clearable: true,
          filterable: true,
          label: this.$t("消息跟催Id"),
          prop: "followId",
          span: 12,
        },
        {
          type: "radio",
          clearable: true,
          filterable: true,
          label: this.$t("任务渠道"),
          prop: "msgChannel",
          change: () => {
            //抛弃原有值
            this.ruleForm.dcFormId = "";
            this.ruleForm.templateId = "";
            this.ruleForm.content = "";
            this.ruleForm.variables = "";
            this.ruleForm.msgAccountId = "";
            // dc chat
            if (this.ruleForm.msgChannel == 1) {
              //dc 模版显现
              this.hideProp.templateId = true;
              this.hideProp.dcFormId = false;
              // 任务是否排他
              this.hideProp.exclusive = false;
              this.hideProp.receiverorVChannelId = false;
              // 编辑器显示
              this.isDcEditorShow = true;
              // 初始化dc的一些操作
              this.initDCInsert();
            } else if (this.ruleForm.msgChannel == 2) {
              //dc 模版显现
              this.hideProp.dcFormId = true;
              this.hideProp.templateId = false;
              // 任务是否排他不显示
              this.hideProp.exclusive = true;
              this.hideProp.receiverorVChannelId = true;
              this.ruleForm.exclusive = 0;
              //回调url 不显示
              this.hideProp.notifyUrl = true;
              this.ruleForm.notifyUrl = "";
              //群会话id 不显示，显示接收者
              this.hideProp.vChannelId = true;
              this.ruleForm.vChannelId = "";
              this.hideProp.receiver = false;
              // dc编辑器隐藏
              this.isDcEditorShow = false;
              // 初始化邮件的一些操作
              this.initMsgInsert();
            }
          },
          span: 12,
        },

        {
          type: "radio",
          clearable: true,
          filterable: true,
          label: this.$t("任务是否排他"),
          prop: "exclusive",
          change: () => {
            // 排他
            if (this.ruleForm.exclusive == 1) {
              this.hideProp.notifyUrl = false;
            } else if (this.ruleForm.exclusive == 0) {
              //消除url数据
              this.ruleForm.notifyUrl = "";
              this.hideProp.notifyUrl = true;
            }
          },
          span: 12,
        },

        {
          type: "text",
          clearable: true,
          filterable: true,
          label: this.$t("回调url"),
          prop: "notifyUrl",
          span: 24,
        },

        {
          type: "select",
          clearable: true,
          filterable: true,
          label: this.$t("邮件模版"),
          prop: "templateId",
          span: 24,
          change: (val) => {
            this.ruleForm.content = "";
            this.hideProp.msgTemplatePreview = false;
            this.hideProp.variablesList = false;
            this.hideProp.content = true;
            this.ruleForm.variables = "";
            if (val) {
              msgTemplateDetailApi({
                id: val,
              }).then((res) => {
                console.log(res);
                if (res.data) {
                  // this.hideProp.content = false;
                  let { content, createTime, creator } = res.data;
                  this.templateContent = content;
                  this.getVariablesListData();
                }
              });
            }
          },
          clear: () => {
            this.ruleForm.templateId = "";
            this.ruleForm.variables = "";
            this.hideProp.msgTemplatePreview = true;
            this.hideProp.variablesList = true;
            this.hideProp.content = false;
          },
        },

        {
          type: "select",
          clearable: true,
          filterable: true,
          label: this.$t("D-Chat模版"),
          prop: "dcFormId",
          span: 24,
          change: (val) => {
            this.ruleForm.content = "";
            this.hideProp.dcFormPreview = false;
            this.hideProp.variablesList = false;
            this.hideProp.content = true;
            if (val) {
              dcFormDetailApi({
                id: val,
              }).then((res) => {
                console.log(res);
                if (res.data) {
                  // this.hideProp.content = false;
                  let { json } = res.data;
                  this.templateContent = json;
                  this.getVariablesListData();
                }
              });
            }
          },
          clear: () => {
            this.ruleForm.dcFormId = "";
            this.ruleForm.variables = "";
            this.hideProp.dcFormPreview = true;
            this.hideProp.variablesList = true;
            this.hideProp.content = false;
          },
        },

        {
          type: "select",
          clearable: true,
          filterable: true,
          label: this.$t("发送账号"),
          prop: "msgAccountId",
          span: 24,
          change: (val) => {
            this.ruleForm.previewMsgAccountId = true;
            this.disabledHandle();
          },
          clear: () => {
            this.ruleForm.msgAccountId = "";
            this.ruleForm.previewMsgAccountId = false;
            this.disabledHandle();
          },
        },
        {
          type: "radio",
          clearable: true,
          filterable: true,
          // 会话id ，还有账号(默认)
          label: this.$t("接收者"),
          prop: "receiverorVChannelId",
          change: () => {
            // 账号
            if (this.ruleForm.receiverorVChannelId == true) {
              this.ruleForm.vChannelId = "";
              this.hideProp.receiver = false;
              this.hideProp.vChannelId = true;
            }
            //
            else if (this.ruleForm.receiverorVChannelId == false) {
              this.ruleForm.receiver = "";
              this.hideProp.receiver = true;
              this.hideProp.vChannelId = false;
            }
          },
          span: 24,
        },
        {
          type: "text",
          clearable: true,
          filterable: true,
          label: this.$t("群会话Id"),
          prop: "vChannelId",
          span: 24,
        },
        {
          type: "textarea",
          clearable: true,
          rows: 4,
          label: this.$t("任务接收者"),
          span: 24,
          prop: "receiver",
          placeholder: "请输入账号（邮箱前缀）多个账号请使用英文逗号分割；示例：zhangsan,lisi,wangwu,laoliu",
        },
        {
          type: "slot",
          prop: "content",
          span: 24,
          label: this.$t("任务内容"),
        },
        {
          type: "slot",
          clearable: true,
          label: this.$t("邮件模板预览"),
          prop: "msgTemplatePreview",
          span: 24,
        },
        {
          type: "slot",
          clearable: true,
          label: this.$t("DC模板预览"),
          prop: "dcFormPreview",
          span: 24,
        },
        {
          type: "slot",
          label: this.$t("模版变量"),
          prop: "variablesList",
          span: 24,
        },
        {
          type: "slot",
          prop: "operation",
          style: { "text-align": "center" },
          span: 24,
        },
      ],
      rules: {
        title: [{ required: true, message: "请输入任务标题", trigger: "blur" }],
        receiver: [{ required: true, message: "请选择任务接收者", trigger: "blur" }],
        content: [{ required: true, validator: validContent, trigger: "blur" }],
        msgAccountId: [{ required: true, message: "请选择发送账号", trigger: "blur" }],
        vChannelId: [{ required: true, message: "请输入会话Id", trigger: "blur" }],
      },
    };
  },
  // 初始化数据
  mounted() {
    // 编辑
    if (this.$route.query.id) {
      this.initDetail();
    } else {
      // 新增初始化
      this.initDCInsert();
    }
  },
  computed: {
    // disabledHandle() {
    //   return !(this.ruleForm.previewTitle && this.ruleForm.previewMsgAccountId && this.ruleForm.previewContent);
    // },
  },
  watch: {
    "ruleForm.templateId": {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          // this.ruleForm.variables = "";
          this.hideProp.msgTemplatePreview = false;
          this.hideProp.variablesList = false;
          this.hideProp.content = true;
          console.log("templateId", newVal);
          // 预览显现
          this.ruleForm.previewContent = true;
          this.disabledHandle();

          // iframe加载
          this.iframeUrl = "/space/msgTemplatePreview?id=" + newVal;
        } else if (!this.ruleForm.templateId && !this.ruleForm.dcFormId) {
          this.hideProp.variables = true;
          this.hideProp.msgTemplatePreview = true;
          this.hideProp.variablesList = true;
          this.hideProp.content = false;
        }
      },
    },
    "ruleForm.dcFormId": {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.hideProp.variablesList = false;
          this.hideProp.content = true;
          // 预览显现
          this.ruleForm.previewContent = true;
          this.disabledHandle();
        } else if (!this.ruleForm.templateId && !this.ruleForm.dcFormId) {
          this.hideProp.variables = true;
          this.hideProp.variablesList = true;
          this.hideProp.content = false;
        }
      },
    },
    "ruleForm.content": {
      deep: true,
      immediate: true,
      handler(newVal) {
        console.log("watch newValue>", newVal);
        console.log(this.ruleForm.msgChannel);
        // console.log("watch this.ruleform>", this.ruleForm);
        //删除直接上传的图片
        if (this.ruleForm.msgChannel === 1) {
          if (newVal) {
            this.ruleForm.content = newVal.replace(/!\[\w+\.\w+\]\(del this\)/g, "");

            this.ruleForm.previewContent = true;
            this.disabledHandle();
          } else {
            this.ruleForm.previewContent = false;
            this.disabledHandle();
          }
        }
      },
    },
    // "ruleForm.variables": {
    //   deep: true,
    //   immediate: true,
    //   handler(newVal) {
    //     // console.log("watch newValue>", newVal);
    //     // console.log("watch this.ruleform>", this.ruleForm);
    //     if (this.ruleForm.msgChannel === 1) {
    //       if (newVal) {
    //         this.ruleForm.previewContent = true;
    //         this.disabledHandle();
    //       }
    //     }
    //   },
    // },
    "ruleForm.msgChannel": {
      deep: true,
      immediate: true,
      handler(newVal) {
        console.log(newVal);
        if (newVal === 1) {
          //DC渠道
          this.hideProp.msgTemplatePreview = true;
        } else if (newVal === 2) {
          this.hideProp.dcFormPreview = true;
          //邮件渠道
        }
      },
    },
  },
  methods: {
    previewData() {
      console.log("ruleForm", this.ruleForm.content);
      console.log("img_file", this.img_file);
    },
    getVariablesListData() {
      if (this.ruleForm.variables) {
        this.variablesList.data = JSON.parse(this.ruleForm.variables);
      } else {
        let match = this.templateContent.match(/\u0024{\w+}/g); //匹配获取所有的变量
        match = [...new Set(match)]; //去重
        console.log(match);
        let arr = [];
        match.map((item) => {
          // console.log(item);
          arr.push({ name: item.substring(2, item.length - 1), value: "" });
        });
        this.variablesList.data = arr;
      }
    },
    setVariables() {
      this.ruleForm.variables = JSON.stringify(this.variablesList.data);
    },
    // markdown保存图片
    $imgAdd(pos, $file) {
      // console.log("pos", pos);
      // console.log("file", $file);
      let md = this.$refs.markdownEditor;
      if ($file.miniurl) {
        this.message.warning({ message: "暂不支持上传图片，请使用链接插入图片" });
        // console.log("md>", md);
        md.$img2Url(pos, "del this"); //替换url，用以标记待删除的无效图片上传
      }
      // // 第一步.将图片上传到服务器.
      // var formdata = new FormData();
      // formdata.append("image", $file);
      // axios({
      //   url: "server url",
      //   method: "post",
      //   data: formdata,
      //   headers: { "Content-Type": "multipart/form-data" },
      // }).then((url) => {
      //   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
      //   // $vm.$img2Url 详情见本页末尾
      //   $vm.$img2Url(pos, url);
      // });
    },
    //打开链接插入图片
    $toggle_imgLinkAdd(type) {
      let md = this.$refs.markdownEditor;
      md.$children[0].$toggle_imgLinkAdd(type);
    },
    editorChange(editor) {
      this.editor = editor;
      console.log("editor >", editor);
      console.log(editor.isEmpty());
      this.ruleForm.content = editor.getHtml();
      this.ruleForm.previewContent = !editor.isEmpty();
      this.disabledHandle();
    },
    disabledHandle() {
      if (this.hideProp.variablesList) {
        this.optReviewDis = !(
          this.ruleForm.previewTitle &&
          this.ruleForm.previewMsgAccountId &&
          this.ruleForm.previewContent
        );
      } else {
        this.optReviewDis = !(this.ruleForm.previewTitle && this.ruleForm.previewMsgAccountId);
      }

      // console.log("this.ruleForm.previewTitle", this.ruleForm.previewTitle);
      // console.log("this.ruleForm.previewMsgAccountId", this.ruleForm.previewMsgAccountId);
      // console.log("this.ruleForm.previewContent", this.ruleForm.previewContent);
    },
    initDetail() {
      this.datailTouch();
    },
    initDCInsert() {
      //禁止预览
      this.optReviewDis = true;
      this.hideProp.dcFormId = false;
      this.ruleForm.msgAccountId = "";
      this.optionData.templateId = [];
      this.optionData.msgAccountId = [];
      this.getOptionDataDcForm();
      this.getOptionDataDcsender();
    },
    // 初始化msg
    initMsgInsert() {
      this.optReviewDis = true;
      this.hideProp.templateId = false;
      this.ruleForm.msgAccountId = "";
      this.optionData.dcFormId = [];
      this.optionData.msgAccountId = [];
      this.getOptionDataMsgTempla();
      this.getOptionDataMsgsender();
    },

    getOptionDataMsgTempla() {
      msgTemplateListApi().then((res) => {
        this.optionData.templateId = res.data.list.map(function (item, index, array) {
          // 解构赋值
          let { id, name } = item;
          return { label: name, value: id };
        });
      });
    },
    getOptionDataMsgsender() {
      msgSenderListApi().then((res) => {
        this.optionData.msgAccountId = res.data.map(function (item, index, array) {
          // 解构赋值
          let { id, sender } = item;
          return { label: sender, value: id };
        });
      });
    },

    getOptionDataDcForm() {
      dcFromListApi().then((res) => {
        this.optionData.dcFormId = res.data.list.map(function (item, index, array) {
          // 解构赋值
          let { id, name } = item;
          return { label: name, value: id };
        });
      });
    },
    getOptionDataDcsender() {
      dcSenderListApi().then((res) => {
        this.optionData.msgAccountId = res.data.list.map(function (item, index, array) {
          // 解构赋值
          let { id, name } = item;
          return { label: name, value: id };
        });
      });
    },

    reset() {
      this.$refs.formRef.resetForm("ruleForm");
    },
    // 新建
    upsertSource() {
      if (this.ruleForm.templateId || this.ruleForm.dcFormId) {
        this.setVariables();
      } else {
        this.ruleForm.variables = "";
      }
      let {
        // 标题
        title,
        // 内容
        content,
        // 接收者
        receiver,
        // 渠道
        msgChannel,
        // 0 不排他，1 排他
        exclusive,
        // 模版id
        templateId,
        // 消息主体
        msgAccountId,
        // dc 表单id
        dcFormId,
        // 模版变量
        variables,
        // 回调地址
        notifyUrl,
        //跟崔id
        followId,
        // dc 会话id
        vChannelId,
      } = this.ruleForm;
      touchInsertApi(
        {
          requestData: {
            id: this.$route.query.id || "",
            spaceId: this.$route.query.spaceId || "",
            title,
            content,
            receiver,
            msgChannel,
            // 0 不排他，1 排他
            exclusive,
            templateId: Number(this.ruleForm.templateId) || 0,
            msgAccountId: Number(this.ruleForm.msgAccountId) || 0,
            dcFormId: Number(this.ruleForm.dcFormId) || 0,
            variables,
            notifyUrl,
            followId: Number(this.ruleForm.followId) || 0,
            vChannelId,
          },
        },
        {
          spaceId: this.$route.query.spaceId,
        },
      ).then((res) => {
        let state = this.message.state(res);
        if (!state) return;
        this.$router.push({
          name: "touchList",
          params: { spaceId: this.$route.query.spaceId },
        });
      });
    },

    // 暂存
    upsertTempSource() {
      // 给变量json赋值
      if (this.ruleForm.templateId || this.ruleForm.dcFormId) {
        this.setVariables();
      } else {
        this.ruleForm.variables = "";
      }
      let {
        // 标题
        title,
        // 内容
        content,
        // 接收者
        receiver,
        // 渠道
        msgChannel,
        // 0 不排他，1 排他
        exclusive,
        // 模版id
        templateId,
        // 消息主体
        msgAccountId,
        // dc 表单id
        dcFormId,
        // 模版变量
        variables,
        // 回调地址
        notifyUrl,
        //跟崔id
        followId,
        // dc 会话id
        vChannelId,
      } = this.ruleForm;
      // touchInsertTempApi(
      //   {
      //     requestData: {
      //       id: this.$route.query.id || "",
      //       spaceId: this.$route.query.spaceId || "",
      //       title,
      //       content,
      //       receiver,
      //       msgChannel,
      //       // 0 不排他，1 排他
      //       exclusive,
      //       templateId: Number(this.ruleForm.templateId) || 0,
      //       msgAccountId: Number(this.ruleForm.msgAccountId) || 0,
      //       dcFormId: Number(this.ruleForm.dcFormId) || 0,
      //       variables,
      //       notifyUrl,
      //       followId: Number(this.ruleForm.followId) || 0,
      //       vChannelId,
      //     },
      //   },
      //   {
      //     spaceId: this.$route.query.spaceId,
      //   },
      // ).then((res) => {
      //   let state = this.message.state(res);
      //   if (!state) return;
      //   this.$router.push({
      //     name: "touchList",
      //     params: { spaceId: this.$route.query.spaceId },
      //   });
      // });
    },

    // 预览
    previewTouchSource() {
      let {
        // 标题
        title,
        // 内容
        content,
        // 接收者
        receiver,
        // 渠道
        msgChannel,
        // 0 不排他，1 排他
        exclusive,
        // 模版id
        templateId,
        // 消息主体
        msgAccountId,
        // dc 表单id
        dcFormId,
        // 模版变量
        variables,
        // 回调地址
        notifyUrl,
        //跟崔id
        followId,
        // dc 会话id
        vChannelId,
      } = this.ruleForm;
      previewTouchApi(
        {
          requestData: {
            id: this.$route.query.id || "",
            spaceId: this.$route.query.spaceId || "",
            title,
            content,
            receiver,
            msgChannel,
            // 0 不排他，1 排他
            exclusive,
            templateId: Number(this.ruleForm.templateId) || 0,
            msgAccountId: Number(this.ruleForm.msgAccountId) || 0,
            dcFormId: Number(this.ruleForm.dcFormId) || 0,
            variables,
            notifyUrl,
            followId: Number(this.ruleForm.followId) || 0,
            vChannelId,
          },
        },
        {
          spaceId: this.$route.query.spaceId,
        },
      ).then((res) => {
        let state = this.message.state(res);
        if (!state) return;
      });
    },
    // 获取详情
    datailTouch() {
      let id = this.$route.query.id;
      detailTaskApi({
        requestData: id,
      }).then((res) => {
        let state = this.message.state(res);
        if (!state) return;
        let {
          templateId,
          // 消息主体
          msgAccountId,
          // dc表单id
          dcFormId,
          // 模版变量
          variables,
          // 跟催id
          followId,
          // dc会话id
          vChannelId,
        } = res.data;

        res.data.templateId = templateId ? templateId : "";
        res.data.msgAccountId = msgAccountId ? msgAccountId : "";
        res.data.dcFormId = dcFormId ? dcFormId : "";
        res.data.variables = variables ? variables : "";
        res.data.followId = followId ? followId : "";
        res.data.vChannelId = vChannelId ? vChannelId : "";

        this.ruleForm = res.data;

        this.getVariablesListData();
        // 判断会话id
        if (this.ruleForm.vChannelId != "") {
          this.ruleForm.receiverorVChannelId = false;
          // 会话id 显示,接收者不显示
          this.hideProp.vChannelId = false;
          this.hideProp.receiver = true;
        } else {
          this.ruleForm.receiverorVChannelId = true;
        }
        // 判断任务渠道并进行加载
        // dc chat
        if (this.ruleForm.msgChannel === 1) {
          // dc消息内容编辑器显示
          this.isDcEditorShow = true;
          //dc 显示
          this.hideProp.dcFormId = false;
          // 任务是否排他
          this.hideProp.exclusive = false;
          this.hideProp.receiverorVChannelId = false;
          this.getOptionDataDcForm();
          this.getOptionDataDcsender();
        } else if (this.ruleForm.msgChannel === 2) {
          // dc消息内容编辑器隐藏
          this.isDcEditorShow = false;

          //tem 显示
          this.hideProp.templateId = false;
          // 回调url 不显示
          this.hideProp.notifyUrl = true;
          this.hideProp.exclusive = true;
          this.hideProp.receiverorVChannelId = true;
          this.getOptionDataMsgTempla();
          this.getOptionDataMsgsender();
        }
        // 判断任务是否排他
        // 排他 不隐形
        if (this.ruleForm.exclusive == 1) {
          this.hideProp.notifyUrl = false;
        } else {
          this.hideProp.notifyUrl = true;
        }

        // 判断 任务标题，发送账号，任务内容不能为空
        if (this.ruleForm.title != "") {
          this.ruleForm.previewTitle = true;
        }
        if (this.ruleForm.msgAccountId != "" && this.ruleForm.msgAccountId != 0) {
          this.ruleForm.previewMsgAccountId = true;
        }
        if (this.ruleForm.content != "" || this.ruleForm.templateId != 0) {
          this.ruleForm.previewContent = true;
        }
        this.disabledHandle();

        console.log("ruleForm >", this.ruleForm);
      });
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 点击进行提交
    clickInsert() {
      if (this.$refs.formRef.submitForm()) {
        this.upsertSource();
      }
    },
    // 点击进行暂存
    clickInsertTemp() {
      this.upsertTempSource();
    },
    // 预览接口
    previewTouch() {
      this.previewTouchSource();
    },
  },
};
</script>

<style lang="scss" scoped>
.outerDiv {
  padding: 20px 10px;
  .v-note-wrapper {
    z-index: 10 !important;
  }
  .markdown-body {
    border: 1px solid #dcdfe6;
    box-shadow: rgb(0 0 0 / 10%) 0 0 0 0 !important;
  }
  .fullscreen {
    z-index: 1501 !important;
  }
}
</style>
